<template>
  <div class="positioning">
    <div style="height: 60px;display: flex;align-items: center;position: absolute;width: 100%;">
      <div class="search">
        <div @click="select" class="search_cs">
          <span>{{current}}</span>
          <van-icon name="arrow-down" />
        </div>
        <div class="search_in">
          <input v-model="search_value" placeholder="请输入用户名" type="text" />
        </div>
        <div style="display: flex;align-items: center;">
          <van-icon name="search" color="#00CBA6" size="24" />
        </div>
      </div>
    </div>

    <!-- <p id='adcode'></p> -->
    <van-popup position="" style="width: 100%;height: 100%;" v-model="show">
      <van-nav-bar title="城市列表" left-arrow @click-left="onClickLeft" />
      <div style="width: 100%;height: 46px;"></div>
      <div class="current">
        <div class="current_box">
          <span>当前城市</span>
          <span style="color: #00CBA6;">{{current}}</span>
        </div>
        <div class="current_box">
          <span>定位城市</span>
          <span style="color: #00CBA6;display: flex;align-items: center;">
            <van-icon name="location" size="16px" />{{chengshi}}</span>
        </div>
      </div>
      <div class="popular">
        <p class="popular_p">热门城市</p>
        <div style="display: flex;flex-wrap: wrap;justify-content: space-around;">
          <div @click="popularCs(itme)" class="popular_cs" v-for="(itme,index) in Popular" :kye='index'>{{itme}}</div>
        </div>
      </div>
      <!-- <div> -->
      <van-index-bar :index-list="nameData">
        <div v-for="(data,index) in ityList" :key="index">
          <van-index-anchor :index="data.id">{{data.name}}</van-index-anchor>
          <van-cell @click="cell(res.name)" v-for="(res,index) in data.content" :key="index" :title="res.name" />

        </div>

      </van-index-bar>

    </van-popup>

  </div>
</template>

<script>
import city from '@/assets/js/city.js'
import AMap from "AMap"
export default {

  components: {
    // "v-search": search,
  },
  data () {
    return {
      // indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      show: false,

      chengshi: '', //定位
      current: '', //选择城市
      search_value: '',
      nameData: [
        'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V',
        'W',
        'X', 'Y', 'Z'
      ],
      Popular: ['上海', '北京', '广州', '深圳', '武汉', '天津', '西安', '南京', '杭州', '成都', '重庆', '郑州'],
      ityList: city,//城市数组
    }
  },

  mounted () {

    if (sessionStorage.getItem("city")) {
      this.current = sessionStorage.getItem("city")
    } else {
      this.mapinit()
    }
    console.log(this.ityList)
    // console.log(this.chengshi)
    // for(let i=0;i < this.city.length;i++){
    //   console.log(this.city[0])
    // }
  },
  created () {
    // this.getLocation();
    // this.getLngLatLocation()
  },
  methods: {
    mapinit () { //定位
      let that = this
      let map = new AMap.Map("container", {
        enableHighAccuracy: true,

        resizeEnable: true,
        center: [114.085947, 22.547],
        zoom: 8,
      });
      // document.getElementById('adcode').innerHTML = '当前城市adcode：' + map.getAdcode() + '<br>' +
      //   '当前中心点：' + map.getCenter()
      //获取用户所在城市信息
      function showCityInfo () {
        //实例化城市查询类
        let citysearch = new AMap.CitySearch();
        //自动获取用户IP，返回当前城市
        citysearch.getLocalCity(function (status, result) {
          console.log(result)
          if (status === 'complete' && result.info === 'OK') {

            if (result && result.city && result.bounds) {
              // console.log(JSON.stringify(result));
              let cityinfo = result.city;
              let citybounds = result.bounds;
              that.chengshi = cityinfo
              that.current = cityinfo
              // document.getElementById('info').innerHTML = '您当前所在城市：' + cityinfo;
              //地图显示当前城市
              map.setBounds(citybounds);
            }
          } else {
            // document.getElementById('info').innerHTML = result.info;
            // console.log(result)
          }
        });
      }
      showCityInfo();
    },
    select () { //打开选择城市
      this.show = true;
    },
    cell (e) { //选择城市
      this.current = e
      this.show = false;
      // console.log(e)
      // console.log(this.chengshi)
    },
    popularCs (e) { //选择热门城市
      this.current = e
      this.show = false;
      // console.log(e)
    },
    onClickLeft () { //关闭选择城市
      this.show = false;
    },
  },

}
</script>

<style lang="scss">
.positioning {
  height: 5rem;
  // background: red;
  width: 100%;
  position: relative;

  .search {
    width: 80%;
    margin: 0 auto;
    display: flex;
    background: white;
    height: 3.125rem;
    border: 0.0625rem solid #00cba6;

    .search_cs {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 70px;
    }

    .search_in {
      display: flex;
      align-items: center;
      width: 60%;

      input {
        border: none;
        border-left: 1px solid #999999;
        border-radius: 0 !important;
      }
    }
  }

  .current {
    display: flex;
    padding: 0.625rem 1rem;
    line-height: 2rem;
    font-size: 1.125rem;
    background: #ffffff;
    justify-content: space-between;
    color: #999999;

    .current_box {
      width: 50%;
      display: flex;
      justify-content: space-around;
    }
  }

  .popular {
    .popular_p {
      padding: 10px 16px;
      background: #f5f5f5;
      font-size: 1.1rem;
    }

    .popular_cs {
      width: 80px;
      height: 30px;
      margin: 0.625rem 0.625rem;
      border-radius: 1.875rem;
      border: 1px solid #e4e4e4;
      display: flex;
      font-size: 1rem;
      align-items: center;
      justify-content: center;
    }
  }

  .van-index-bar {
    color: #999999 !important;

    .van-index-anchor {
      background: #f5f5f5;
      color: #999999 !important;
      font-weight: 600;
    }

    .van-cell {
      color: #999999 !important;
    }
  }

  .van-popup {
    // top: 0;
    // transform:translate3d(0,0%,0) !important;
    .van-nav-bar {
      .van-nav-bar__left {
        .van-icon {
          font-size: 22px;
          color: #46d0ca !important;
        }
      }
    }
  }
}
</style>
